<template>
  <!-- 我的优惠 -->
  <div class="discount_container">
    <div class="main">
      <nut-tabs v-model="tab_id" title-scroll title-gutter="10">
        <template #titles>
          <div
            v-for="(item, g) in tab_list"
            :key="g"
            :class="['tab_wrap', { tab_active: tab_id == item.id }]"
            @click="tab_id = item.id"
          >
            <span>{{ t(item.label) }}</span>
            <div v-if="item.showDot" class="dot"></div>
          </div>
        </template>
      </nut-tabs>
      <div class="main_content">
        <div v-if="filterData.length > 0" :key="filterData.length">
          <div
            class="list_item"
            v-for="item in filterData"
            :key="item.tag"
            :style="{
              background: item.bgColor,
            }"
          >
            <div class="left">
              <img :src="item.imageIcon" alt="" class="item_img" />
              <span :style="{ color: item.textColor }">{{ item.name }}</span>
            </div>
            <div
              class="apply"
              @click="receiveClick(item)"
              v-if="['System', 'VIP_related'].includes(item.tag)"
            >
              {{ t("promo_page_receive") }}
            </div>
            <div class="apply" @click="applyClick(item)" v-else>
              <span v-if="item.id == 8001"> {{ t("view_details") }}</span>
              <span v-else> {{ t("offer_apply") }}</span>
            </div>
          </div>
        </div>
        <div v-show="filterData.length == 0" class="no_data">
          {{ t("nomore_data") }}
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <Modal v-model:visible="isShow" :title="modelTitle" @close="handleClose">
      <div class="popup_body">
        <div class="model_content" v-if="['constant', 'deposit'].includes(itemInfo?.tag)">
          <div class="model_item">
            <span
              >{{
                tab_id == "constant"
                  ? t("deposit_page_upperLimit")
                  : t("deposit_page_giftAmount")
              }}：</span
            >
            <span>{{ Intl.NumberFormat().format(detailsInfo?.limit) || "--" }}</span>
          </div>
          <div class="model_item" v-if="detailsInfo?.ratio">
            <span>{{ t("first_deposit_revive_gift") }}：</span>
            <span>{{ detailsInfo?.ratio + "%" || "--" }}</span>
          </div>
          <div class="model_item">
            <span>{{ t("first_deposit_revive_water") }}：</span>
            <span>{{ detailsInfo?.require + "x" }}</span>
          </div>
          <div class="model_item">
            <span>{{ t("first_deposit_revive_minimum") }}：</span>
            <span>{{ Intl.NumberFormat().format(detailsInfo?.threshold) || "--" }}</span>
          </div>
          <div class="model_item_gold" v-if="hasSave">
            <span>{{ t("first_deposit_revive") }}：</span>
            <div>
              <span>{{ t("first_deposit_revive_gift") }}：</span>
              <span>{{ detailsInfo?.save_ratio + "%" || "--" }}</span>
            </div>
            <div>
              <span>{{ t("first_deposit_revive_water") }}：</span>
              <span>{{ detailsInfo?.save_require + "x" }}</span>
            </div>
            <div>
              <span>{{ t("first_deposit_min_amount") }}：</span>
              <span>{{
                Intl.NumberFormat().format(detailsInfo?.save_trigger) || "--"
              }}</span>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="sys_content">
            <div>{{ t("promo_page_vip", { vip: vipName }) }}</div>
            <div class="bonus">{{ itemInfo?.bonus }}</div>
          </div>
        </div>
        <div>
          <nut-button
            v-if="['constant', 'deposit'].includes(itemInfo?.tag)"
            class="submit"
            @click="submit"
            >{{ t("promo_page_apply") }}</nut-button
          >
          <nut-button v-else class="submit" @click="submitRecive">{{
            t("vip_collect")
          }}</nut-button>
        </div>
      </div>
    </Modal>

    <!-- 首存300 弹窗 -->
    <nut-popup
      v-model:visible="firstStorage300Show"
      style="background-color: transparent; overflow: auto; width: 100vw"
    >
      <first-storage_three v-model="firstStorage300Show" />
    </nut-popup>
    <!-- 首存弹窗 -->
    <first-storage
      v-if="firstStorageShow"
      v-model:show="firstStorageShow"
      @close="handleFirstStorageClose"
    />
    <div>
      <Toast v-model:visible="showToast">{{ toast_value }}</Toast>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, onMounted, onUnmounted, computed } from "vue";
import { NetPacket } from "@/netBase/NetPacket";
// import { Net } from '@/net/Net';
import H5Websocket from "@/net/Net1";
import { MessageEvent2 } from "@/net/MessageEvent2";
import { NetMsgType } from "@/netBase/NetMsgType";
import { useI18n } from "vue-i18n";
import Toast from "@/components/Toast.vue";
import { Local } from "@/utils/storage";
import FirstStorage_three from "@/views/myDiscounts/components/firstStorage_three.vue";
import FirstStorage from "@/views/firstStorage/index.vue";

const { t } = useI18n();
const router = useRouter();
const isShow = ref(false);
const firstStorageShow = ref(false);
const firstStorage300Show = ref(false);
const modelTitle = ref();
const tab_id = ref("1");
const listData: any = ref([]);
const showToast = ref(false);
const toast_value = ref("");
const detailsInfo = ref();
const itemInfo: any = ref();

const styleObj: any = {
  System: {
    imageIcon: "/imgs/myDiscounts/icon1.webp",
    textColor: "#3B47C0",
    color:
      "linear-gradient(93.52deg, #D1E1FE 2.39%, #A3B8E4 12.26%, #B8D0FC 47.41%, #EDF3FF 100.56%)",
  },
  constant: {
    imageIcon: "/imgs/myDiscounts/icon2.webp",
    textColor: "#365608",
    color:
      "linear-gradient(93.52deg, #B3D71D 2.39%, #598A11 12.26%, #7CAF0D 47.41%, #F2FDC7 100.56%)",
  },
  8001: {
    imageIcon: "/imgs/myDiscounts/icon3.webp",
    textColor: "#973207",
    color:
      "linear-gradient(93.52deg, #FFE8D2 2.39%, #CC865F 12.26%, #D0A288 47.41%, #F7E8DB 100.56%)",
  },
  deposit: {
    imageIcon: "/imgs/myDiscounts/icon4.webp",
    textColor: "#563C90",
    color:
      "linear-gradient(93.52deg, #D8C9F1 2.39%, #A793D1 12.26%, #CBBCF4 47.61%, #EEE3FF 100.56%)",
  },
  VIP_related: {
    imageIcon: "/imgs/myDiscounts/icon5.webp",
    textColor: "#AE7433",
    color:
      "linear-gradient(93.52deg, #ffeed2 2.39%, #cca35f 12.26%, #d0b588 47.41%, #f7ecdb 100.56%)",
  },
};

// 是否有复活金
const hasSave = computed(() => {
  return (
    detailsInfo.value?.save_ratio ||
    detailsInfo.value?.save_trigger ||
    detailsInfo.value?.save_require
  );
});

const vipName = computed(() => {
  if (itemInfo.value?.tag == "System") {
    return itemInfo.value?.details;
  } else {
    return itemInfo.value?.content.split("_")[2];
  }
});

const tab_list = ref([
  { label: "promo_page_all", id: "1", showDot: false },
  { label: "promo_page_guDing", id: "constant", showDot: false },
  { label: "promo_page_depositZen", id: "deposit", showDot: false },
  { label: "promo_page_system", id: "System", showDot: false },
  { label: "promo_page_vipZen", id: "VIP_related", showDot: false },
]);
const type_obj: any = {
  constant: "promo_page_guDing",
  deposit: "promo_page_depositZen",
  System: "promo_page_system",
  VIP_related: "promo_page_vipZen",
};

const filterData: any = computed(() => {
  const list = listData.value.filter(
    (item: any) => item.tag == tab_id.value && item.name
  );
  return tab_id.value == "1" ? listData.value : list;
});

// const isDot = (item: any) => {
//     return item.tag == 'System' || item.tag == 'VIP_related'
// }

// 弹窗关闭
const handleClose = () => {};

// 获取优惠数据
const isShouCun = ref(true);
const handleNotify = (rs: any) => {
  const shouCun = rs.dis.filter((item: any) => [8001, 8002].includes(item.id));
  tab_list.value[3].showDot = rs.dis.some((item: any) => item.tag == "System");
  tab_list.value[4].showDot = rs.dis.some((item: any) => item.tag == "VIP_related");

  // 首存2选1
  if (shouCun.length == 2) {
    isShouCun.value = true;
    listData.value = rs.dis.filter(
      (item: any) => item.name && ![8001, 8002].includes(item.id)
    );
    listData.value.push({
      name: "首存2选1，优惠多多",
      tag: "constant",
      status: 0,
      id: 8001,
    });
  } else {
    isShouCun.value = false;
    listData.value = rs.dis.filter((item: any) => item.name);
  }

  listData.value.forEach((item: any) => {
    item.imageIcon = styleObj[item.tag].imageIcon;
    item.bgColor = styleObj[item.tag].color;
    item.textColor = styleObj[item.tag].textColor;
  });
};

// 申请
const applyClick = (data: any) => {
  if (data.id === 8001 || data.id === 8002) {
    if (!isShouCun.value) {
      firstStorage300Show.value = true;
      return;
    }

    // 8001是首存活动的tag
    firstStorageShow.value = true;
    return;
  }

  itemInfo.value = data;
  isShow.value = true;
  modelTitle.value = t(type_obj[data.tag]);

  const query = NetPacket.req_discount_details();
  query.activity_ID = data.id;
  H5Websocket.sendMessageHandler(query);
  // Local.set('curDiscountData', data); // 当前选择的优惠，需要带到充值页面
  // router.push('/deposit')
};

// 立即申请
const submit = () => {
  Local.set("curDiscountData", detailsInfo.value); // 当前选择的优惠详情，需要带到充值页面
  router.push("/deposit");
};

// 立即领取
const receiveClick = (item: any) => {
  itemInfo.value = item;
  modelTitle.value = t(type_obj[item.tag]);
  isShow.value = true;
  // const query = NetPacket.req_get_email_attachments();
  // query.email_id = item.details;  // 这个 details 才是领取的 id
  // H5Websocket.sendMessageHandler(query);
};

const submitRecive = () => {
  const query = NetPacket.req_get_email_attachments();
  query.email_id = itemInfo.value.details; // 这个 details 才是领取的 id
  H5Websocket.sendMessageHandler(query);
};

//通知附件领取成功回执
const resultAttachments = (res: any) => {
  showToast.value = true;
  if (res.email_id.includes("#") || res.email_id === "-0") {
    toast_value.value = t("promo_page_applyFail");
  } else {
    // 成功
    toast_value.value = t("promo_page_applySuc");
    const query = NetPacket.req_my_recharge_discount();
    H5Websocket.sendMessageHandler(query);
    isShow.value = false;
  }
};

// 优惠详情
const resultDetails = (res: any) => {
  detailsInfo.value = res.details;
};

const handleFirstStorageClose = () => {
  firstStorageShow.value = false;
};

onMounted(() => {
  const query = NetPacket.req_my_recharge_discount();
  H5Websocket.sendMessageHandler(query);

  // 回执监听
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_my_recharge_discount,
    handleNotify
  );
  // 通知附件领取成功
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_get_email_attachments,
    resultAttachments
  );
  // 优惠详情
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_discount_details,
    resultDetails
  );
});

onUnmounted(() => {
  // 取消监听
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_my_recharge_discount, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_discount_details, null);
  // 通知附件领取成功
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_email_attachments, null);
});
</script>

<style lang="scss" scoped>
.discount_container {
  height: calc(100vh - 150px);
}

.main {
  &:deep(.nut-tabs__titles .nut-tabs__titles-item) {
    min-width: 50px;
    font-size: 12px;
  }
  &:deep(.nut-tabs) {
    padding: 0 10px;
    padding-top: 5px;
  }
  &:deep(.nut-tabs__titles) {
    display: flex;
    justify-content: space-between;
    margin-bottom: unset;
    // padding: 0 10px;
  }

  // padding: 0 10px;
}

.attention {
  color: #a2a5de;
  font-size: 12px;
  text-align: center;
}

.list_item {
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  padding: 0 10px;
  margin-top: 10px;
  border-radius: 8px;

  .left {
    flex: 1;
    display: flex;
    align-items: center;

    img {
      width: 42px;
      height: 50px;
    }

    span {
      flex: 1;
      color: #93b4ff;
      font-size: 14px;
      font-weight: 550;
      margin-left: 17px;
      margin-right: 1px;
    }
  }

  .apply {
    background: url(/imgs/myDiscounts/applyBtn.webp) center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 32px;
    width: 64px;
    display: flex;
    font-size: 12px;
    justify-content: center;
    align-items: center;
  }
}

.main_content {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 0 14px;
  padding-bottom: 50px;
}

.no_data {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  font-size: 24px;
}

.popup_body {
  padding: 20px 24px;
}

.model_content {
  display: flex;
  flex-direction: column;
  gap: 8px;

  span {
    font-size: 14px;
    font-weight: 500;

    &:nth-child(1) {
      color: #ffffff;
      font-size: 14px;
    }
  }

  .model_item_gold {
    font-size: 14px;
    font-weight: 500;

    span {
      font-size: 14px;
      font-weight: 500;

      &:nth-child(1) {
        color: #ffffff;
        font-size: 14px;
      }

      &:nth-child(2) {
        color: #9e9ea9;
        font-size: 14px;
      }
    }
  }
}

.submit {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  margin-top: 30px;
}

.sys_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  font-size: 14px;

  .bonus {
    color: #ed8302;
    font-size: 20px;
    margin-top: 10px;
  }
}
.tab_wrap {
  height: 40px;
  line-height: 40px;
  position: relative;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 90px;
  margin-right: 10px;
  text-align: center;
}
.tab_active {
  color: #5b6cff;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0px;
    left: 0px;
    border-radius: 2px;
    background: linear-gradient(180deg, #5b6cff 0%, #9e1eff 100%);
  }
}
.dot {
  position: absolute;
  top: 9px;
  right: 0px;
  width: 6px;
  height: 6px;
  background-color: #fe4a5e;
  border-radius: 50%;
  animation: refresh 2s linear infinite;
}

@keyframes refresh {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}
</style>
